<template>
  <div v-if="value===undefined" 空值>value===undefined /// {{ varlike }}</div>
  <div v-else-if="!type" 空类型>!type /// {{ varlike }}</div>
  <div v-else @click.stop>
    <component v-if="extraTypeInputs.get(type.name)"
      :is="extraTypeInputs.get(type.name)"
      :type="type" v-model="value" />
    <VarNumberInput v-else-if="type.is(tNum)" v-model="value" />
    <VarStringInput v-else-if="type.is(tStr)" v-model="value" />
    <VarBoolInput v-else-if="type.is(tBool)" v-model="value" />
    <VarAnyInput v-else-if="type.is(tAny)" v-model="value" />
    <VarNullInput v-else-if="type.is(tNull)" />
    <VarChoiceInput v-else-if="isChoice(type)" :type="type" v-model="value" />
    <VarUnionInput v-else-if="isUnion(type)" :type="type" v-model="value"/>
    <VarInterfaceInput v-else-if="isInterfaceType(type)" :type="type" v-model="value" />
    <VarListInput v-else-if="isListType(type)" :type="type" v-model="value" />
    <div v-else>Unknow Type Input: {{ type.name }}</div>
  </div>
</template>

<script setup lang="ts">
import { tAny, tBool, tNull, tNum, tStr } from '~/models/types';
import { InterfaceType } from '~/models/types/interface_type';
import type { DataType } from '~/models/types/type';
import { ChoiceType } from '~/models/types/choice_type';
import type { Component } from 'vue';
import VarKeyBoardMousePositionInput from './KeyBoard/MousePositionInput.vue'
import { UnionType } from '~/models/types/union_type';
import { ListType } from '~/models/types/list_type';
import VarKeyBoardColorInput from './KeyBoard/ColorInput.vue';
import VarKeyBoardKeyInput from './KeyBoard/KeyInput.vue'
import { VarlikeAdaptor, type Varlike } from '~/models/varlike';
import { whenever } from '@vueuse/core';


const props = defineProps<{
  varlike: Varlike
}>()
const emits = defineEmits<{
  (e: 'update:varlike', event: Varlike): void,
}>()

const t = Object.prototype.toString
const inUnknown = computed(() => VarlikeAdaptor.receive(props.varlike))
whenever(inUnknown, () => console.error('unknown', props.varlike))
const adaptor = computed(() => new VarlikeAdaptor(props.varlike))
const type = computed({
  get() { return adaptor.value.type },
  set(t) { adaptor.value.type = t }
})
const value = computed({
  get() { return adaptor.value.value },
  set(v) { adaptor.value.value = v }
})

function isInterfaceType(t: DataType): t is InterfaceType{
  return t instanceof InterfaceType
}

function isChoice(t: DataType): t is ChoiceType{
  return t instanceof ChoiceType
}

function isUnion(t: DataType): t is UnionType{
  return t instanceof UnionType
}

function isListType(t: DataType): t is ListType{
  return t instanceof ListType
}

const extraTypeInputs = new Map<string, Component>([
  ['MousePosition', VarKeyBoardMousePositionInput],
  ['Key', VarKeyBoardKeyInput],
  ['Color', VarKeyBoardColorInput],
])
</script>

<style lang="scss">
.const-bool-arkvbyganva .el-checkbox__inner {
  // border-color: white !important;
  background: #fff;
}

.const-input-arkvbyganva .el-input__wrapper {
  background: #fff;
  overflow: hidden;

  .el-input__inner {
    color: #000;
  }
}
</style>